<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<jsp:include page="../Common/header.jsp"></jsp:include>

<div class="modal" id="myModal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">×</span>
				</button>
				<h4 class="modal-title">上传头像</h4>
			</div>
			<div class="modal-body">
				<form id="upLoadPhotoForm"
					action="${pageContext.request.contextPath}/user/uploadUserPhoto"
					method="post" enctype="multipart/form-data">
					<input name="file" id="photoinput" type="file" /> <img
						style="width: 170px; height: 170px;" id="LoadPhoto" src="<c:url value="/resources/img/默认.png" />"></img>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default pull-left"
					data-dismiss="modal">关闭</button>
				<form method="post"
					action="${pageContext.request.contextPath}/user/updatePhoto">
					<input id="photourl" type="hidden" name="photourl" value="">
					<input type="hidden" id="x" name="x" value=""> <input
						type="hidden" id="y" name="y" value=""> <input
						type="hidden" id="w" name="w" value=""> <input
						type="hidden" id="h" name="h" value="">
					<button type="submit" class="btn btn-primary">保存</button>
				</form>
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>

<div class="content-wrapper">
	<!-- Content Header (Page header) -->
	<section class="content-header">
		<h1>基本资料</h1>
		<ol class="breadcrumb">
			<li><a href="#"><i class="fa fa-home"></i> Home</a></li>
			<li class="active">个人</li>
			<li class="active">用户设置</li>
			<li class="active">用户资料</li>
		</ol>
	</section>

	<!-- Main content -->
	<section class="content">
		<!-- Small boxes (Stat box) -->

		<div class="box box-danger">
			<div class="box-header with-border">
				<button id="saveButton" class="btn btn-info pull-right">保存</button>
			</div>
			<div class="row">
				<div class="col-xs-12">
					<form id="userInfo" method="post"
						action="${pageContext.request.contextPath}/user/updateUserInfo"
						class="form-horizontal">
						<input type="hidden" name="id" id="id" value="${user.id}">

						<table class="table table-bordered">
							<tbody>
								<tr>
									<th class="col-10"><nobr> 员工帐号 </nobr></th>
									<td colspan="2" class="col-30">
										<p class="form-control-static">${user.accountName}</p>
									</td>
									<td rowspan="3" class="col-20"><img
										style="width: 170px; height: 170px;"
										class="img-thumbnail col-12" id="emp_pic"
										src="<c:url value="${user.photo}" />"></td>
								</tr>
								<tr>
									<th>姓名</th>
									<td colspan="2">
										<p class="form-control-static">${user.name}</p>
									</td>
								</tr>
								<tr>
									<th>性别</th>
									<td colspan="2"><select name="sex" id="sex"
										class="form-control col-10">
											<c:choose>
												<c:when test="${user.sex==true}">
													<option value="1" selected="selected">男</option>
													<option value="0">女</option>
												</c:when>
												<c:when test="${user.sex==false}">
													<option value="1">男</option>
													<option value="0" selected="selected">女</option>
												</c:when>
											</c:choose>
									</select></td>
								</tr>
								<tr>
									<th>生日</th>
									<td colspan="2"><input type="text" id="birthday"
										name="birthday" readonly="readonly"
										class="input-date form-control" value="${user.birthday}">
									</td>
									<td colspan="2"><a onclick="select_avatar();"
										class="btn btn-sm btn-primary" data-toggle="modal"
										data-target="#myModal">上传头像</a></td>
								</tr>
								<tr>
									<th>部门*</th>
									<td class="col-20">
										<p class="form-control-static">盈信创展</p>
									</td>
									<th class="col-10">职位</th>
									<td>
										<p class="form-control-static">程序员</p>
									</td>
								</tr>
								<tr>
									<th><nobr> 办公室电话 </nobr></th>
									<td><input type="text" id="office_tel" name="phone"
										class="form-control" value="${user.phone}"></td>
									<th><nobr> 移动电话 </nobr></th>
									<td><input type="text" id="mobile_tel" name="mobilePhone"
										class="form-control" value="${user.mobilePhone}"></td>
								</tr>
								<tr>
								</tr>
								<tr>
									<th>电子邮箱</th>
									<td colspan="3">
										<p class="form-control-static">${user.email}</p>
									</td>
								</tr>
								<tr>
									<th><nobr> 负责业务 </nobr></th>
									<td colspan="3"><input type="text" id="business"
										name="business" class="form-control" value="${user.business}"></td>
								</tr>
							</tbody>
						</table>
					</form>
				</div>
			</div>
		</div>
	</section>
	<!-- /.Left col -->
</div>

<jsp:include page="../Common/footer.jsp"></jsp:include>
<script type="text/javascript">
	//提交修改表单
	$("#saveButton").click(function() {
		$("#userInfo").submit();
	});
	//绑定日期选择器
	$("#birthday").datepicker({
		format : 'yyyy-mm-dd',
		language : 'zh-CN',
	});

	$('#upLoadPhotoForm').submit(function() {
		// 提交表单
		$(this).ajaxSubmit(function(message) {
			if(message=="")
				{alert("上传失败!");location.reload();return;}
			initJcrop();
			$("#LoadPhoto").attr("src", "/OA/" + message);
			$("#photourl").val(message);
			jcrop_api.setImage("/OA/" + message);
			jcrop_api.setSelect([0,0,100,100]);

		});
		// 为了防止普通浏览器进行表单提交和产生页面导航（防止页面刷新？）返回false
		return false;
	});

	//ajax提交表单
	$("#photoinput").change(function() {
		if($("#photoinput").val()=="")
			{
			  return false;
			}
		$("#upLoadPhotoForm").submit();
	});

	//Jscop
	var jcrop_api;

	// In this example, since Jcrop may be attached or detached
	// at the whim of the user, I've wrapped the call into a function
	

	// The function is pretty simple
	function initJcrop()//{{{
	{
		// Hide any interface elements that require Jcrop
		// (This is for the local user interface portion.)
		// $('.requiresjcrop').hide();

		// Invoke Jcrop in typical fashion
		$('#LoadPhoto').Jcrop({
			aspectRatio : 1 / 1,
			onSelect : updateCoords
		}, function() {
			jcrop_api = this;
		});

	};

	function updateCoords(c) {
		$('#x').val(c.x);
		$('#y').val(c.y);
		$('#w').val(c.w);
		$('#h').val(c.h);
	};
</script>
